<template>
    <div class="container">
        <div class="introduction-box">
            <div class="introduction">
                <div class="top">
                    <div class="title"><span>关于</span>我们</div>
                </div>
                <div class="content">
                    <div class="content-item" v-for="item,index in topList" :key="index">
                        {{ item }}
                    </div>
                </div>
            </div>
            <div class="bottom-box">
                <div class="bottom-num">
                    <div class="item" v-for="item,index in bList" :key='index'>
                        <div class="b1">拥有</div>
                        <div class="bnum">{{ item.num }}+</div>
                        <div class="bname">{{ item.name }}</div>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="list">
            <div class="box"
                v-for="item,index in boxList" :key="index"
            >
                <div class="title">{{item.title}}</div>
                <div class="content">{{ item.content }}</div>
                <div class="bottom">
                    <div class="button">
                        观看视频
                        <div class="icon-right"></div>
                    </div>
                    <div class="img">
                        <img :src="item.background" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            topList: [
                '奥托是一家专注软件系统开发、技防技控一站式解决方案的高科技公司，深耕于AI算法，致力于AI的可解释性、公平性、数据及隐私安全的建设。',
                '奥托一直以来秉承“共谋、共创 、共赢”的经营理念， 践行“创造价值，学习，责任”的核心价值观，坚持为社会创造价值、让技术服务生活。',
                '奥托坚持以客户需求为导向、技术应用为核心、大数据为基础，致力于为粮仓、烟草、银行、煤矿、工厂、电力、税务、公安和消防等多个行业提供数字化智能安全预警平台和智能管理解决方案，助力各行业终端用户完成智能化转型升级，加速人工智能技术落地。',
            ],
            bList: [
                {num: '20', name:'研发人员'},
                {num: '30', name:'自主研发系统'},
                {num: '50', name:'软著/等级证书'},
            ],
            boxList: [
                {
                    title: '粮仓门禁与气体检测联动预警系统',
                    content: '仓内气体数据实时可视化，可24小时在线监测，避免仓内封闭环境下有毒气体不易散发可能引发的安全事故。',
                    background: require('../assets/otto/about/back2.png')
                },
                {
                    title: '粮仓安全智慧预警巡查机器人',
                    content: '机器人通过集成先进的传感器、计算机视觉、人工智能和机器学习技术，可以实现自动避障，可以导航规划路线行走在库区内，可以全方位24小时持续监控、分析、识别，替代传统人工巡检。',
                    background: require('../assets/otto/about/back3.png')
                },
                {
                    title: '粮仓安全智慧预警机器人',
                    content: '机器人可以自动行走仓库内，可以使用在临时作业区，可以对收粮和卸粮的场最做安全管控，同时可以在夜间做无人值守的安全管控。可通过公众号、现场语音及短信提醒多位一体实时预警。',
                    background: require('../assets/otto/about/back4.png')
                },
            ],
        }
    }
}
</script>

<style scoped>
* {
    box-sizing: border-box;
}
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-y: scroll;
    background-color: #f7f7f7;
}

.introduction-box {
    width: 100%;
    min-height: 410px;
    background: url('../assets/otto/about/back.png') no-repeat 0px 0px;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.introduction {
    width: 90%;
    margin: 0 auto;
}
.introduction .top {
    display: flex;
    flex-direction: column;
    width: 188px;
    margin-bottom: 12px;
}

.introduction .top .title {
    font-size: 16px;
    font-weight: 800;
    color: #003161;
}
.introduction .top .title span {
    color: #007AFF;
    font-weight: 800;
}

.introduction .content {
    width: 188px;
    color:#003161;
    font-size: 10px;
}
.introduction .content .content-item {
    text-indent: 1em;
    line-height: 16px;
}
.bottom-box {
    width: 90%;
    margin: 0 auto;
}
.introduction-box .bottom-num {
    display: flex;
    width: 240px;
    justify-content: space-between;
}
.introduction-box .bottom-num .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 60px;
    justify-content: space-between;
}
.introduction-box .bottom-num .item .b1 {
    font-size: 10px;
    color: #007AFF;
    width: 100%;
}
.introduction-box .bottom-num .item .bnum {
    font-size: 32px;
    color: #007AFF;
    width: 100%;
    font-weight: 600;
}
.introduction-box .bottom-num .item .bname {
    font-size: 10px;
    color: #003161;
    width: 100%;
    text-align: center;
}


/* 盒子 */
.list {
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    /* 底部距离 */
    margin-bottom: 70px;
}
.box {
    width: 100%;
    margin-top: 16px;
    border-radius: 14px;
    padding: 38px 26px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    background-color: #fff;
}

.box .title {
    font-size: 24px;
    line-height: 34px;
    font-weight: 800;
    color: #003D79;
}

.box .content {
    font-size: 14px;
    line-height: 22px;
    color: #336494;
    width: 140px;
    margin-top: 14px;
}
.box .bottom {
    display: flex;
    justify-content: space-between;
}
.box .img img {
    height: 170px;
}
.box .bottom .button {
    align-self: flex-end;
    background-color: #1A5086;
    padding: 8px 12px;
    width: fit-content;
    color: #fff;
    font-size: 12px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 80px;
    height: 30px;
}

.box .button .icon-right {
    height: 8px;
    width: 8px;
    background: url('../assets/otto/zx/icon-right-light.png') no-repeat 0px 0px;
    background-size: 100% 100%;
}
</style>